<template>
  <div class="common-layout">
    <el-container>
      <el-header ><el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          乐曲管理
        </span>
        <el-tag>admin</el-tag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">管理员操作</el-divider>
  <div class=box>
    <!-- <el-input v-model="formInline" class="input-width"  placeholder="请输入" /> -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="作品名称">
    <el-input v-model="formInline.workname" placeholder="作品模糊查询" clearable />
  </el-form-item>
  <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="formInline.state" placeholder="请选择一个状态">
          <el-option label="审核" value="审核" />
          <el-option label="审核通过" value="审核通过" />
          <el-option label="审核不通过" value="审核不通过" />
          <el-option label="未审核" value="未审核" />
        </el-select>
      </el-form-item>
  <el-form-item>
  <el-button type="danger" @click="btnQuery"><i class="iconfont icon-chaxun"></i></el-button>
  </el-form-item>
 </el-form>
</div>

</el-header>
<br>
  <!-- 此为视频信息管理头部 -->
      <el-main style="margin-top: 110px;">
      <!-- 页面主体显示内容 -->
        <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="workname" label="乐曲主题" width="250">
      <template #default="scope">
      </template>
    </el-table-column>
    <el-table-column prop="uname" label="上传者" width="250">
      <template #default="scope">
      </template>
    </el-table-column>
    <el-table-column  prop="creat_date" label="上传日期" sortable width="250">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.create_date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="state" label="状态" width="250">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.state}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="detailDialog(scope.row.workid)"
          > <i class="iconfont icon-chakan"></i></el-button>
          <el-button type="danger"  size="small" @click="updateDialog(scope.row.workid)"> <i class="iconfont icon-bianji"></i></el-button>
        <el-popconfirm
      confirm-button-text="是"
      cancel-button-text="否"
      :icon="InfoFilled"
      icon-color="#626AEF"
      title="你确定要删除吗?"
      @confirm="deleteClick(scope.row.workid)"
      >
  <template #reference>
    <el-button type="danger" size="small" @click="deleteClick"> <i class="iconfont icon-lajitong"></i></el-button>
    </template>
</el-popconfirm>
        
      </template>
    </el-table-column>
  </el-table>
  <div class="table-page">
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5,10,20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes,prev, pager, next, jumper"
      :total="pageInfo.total"  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
     </div>
  <el-dialog v-model="updateDialogVisible" title="修改乐曲信息">
  <el-form :model="form">
    <el-form-item label="乐曲" :label-width="formLabelWidth">
           <audio controls :src="form.work"></audio>
    </el-form-item>
    <el-form-item label="上传者" :label-width="formLabelWidth">
      <el-input v-model="form.uname" autocomplete="off" disabled/>
    </el-form-item>
    <el-form-item label="乐曲主题" :label-width="formLabelWidth">
      <el-input v-model="form.workname" autocomplete="off" disabled/>
    </el-form-item>
    <el-form-item label="上传日期" :label-width="formLabelWidth">
      <el-input v-model="form.create_date" autocomplete="off" disabled/>
    </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
      <el-radio-group v-model="form.state">
            <el-radio label="审核通过">审核通过</el-radio>
            <el-radio label="审核不通过">审核不通过</el-radio>
            <el-radio label="未审核">未审核</el-radio>
        </el-radio-group>
      </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="updateDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="updateWork">
        修改
      </el-button>
    </span>
  </template>
</el-dialog>
<!-- 详情对话框 -->
<el-dialog
    v-model="detailDialogVisible"
    title="查看乐曲详情"
    width="60%"
  >
  <el-descriptions :column="1" border>
    <el-descriptions-item label="上传者">{{form.uname}}</el-descriptions-item>
    <el-descriptions-item label="作品名称">{{ form.workname }}</el-descriptions-item>
    <el-descriptions-item label="简介">{{ form.introduction }}</el-descriptions-item>
    <el-descriptions-item label="作品类别">{{ form.worksort }}</el-descriptions-item>
    <el-descriptions-item label="作品"><audio controls :src="form.work"></audio></el-descriptions-item>
    <el-descriptions-item label="上传日期">{{form.create_date}}</el-descriptions-item>
    <el-descriptions-item label="状态">{{form.state}}</el-descriptions-item>
  </el-descriptions>
  </el-dialog>
</el-main>
    </el-container>
  </div>
 </template>

 <script>
 import { ElMessage } from 'element-plus'
 //import { Timer } from '@element-plus/icons-vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
 //import { de } from 'element-plus/es/locale'
 import { ref } from 'vue'
 import { h } from 'vue'
   import { ElDivider } from 'element-plus'
 const input = ref('')
 export default {
  setup() {
      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      // 在这里可以进行其他的逻辑设置

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },

    data(){
        return{
            formInline:{
              workname:"",
              state:""
            }, //搜索表单
            form:{},      //添加对话框
            formLabelWidth:"140px",  //添加对话框宽
            updateDialogVisible:false, // 修改对话框
            detailDialogVisible:false, // 详情对话框
            tableData:[],    //表单数据
            WorkInfo:{},  //数据库详情
            UserInfoData:[],
            pageInfo:{},   //分页信息对象
            pageSize:5,    //当前页条数
            currentPage:1,  //当前页号
        }
    },
    
    mounted(){
      this.LoadData()           
      this.LocalUserInfoData() 
      this.getPageData(1,5)


    },
    methods:{
      center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },

      handleSizeChange(pageSize){   //选择每一页显示的记录数
      this.pageSize = pageSize
      this.getPageData(this.currentPage,this.pageSize)
console.log("size:",pageSize);
    },
    handleCurrentChange(pageNum){  //切换页号时得到当时页号
      this.currentPage = pageNum
      this.getPageData(this.currentPage,this.pageSize)
      console.log("num:",pageNum);

    },
    getPageData(num,size){   //得到分页数据
      this.$http.get("http://localhost:8080/work/musicpages",{params:{pageNum:num,pageSize:size}}).then((response)=>{
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list
      })
    },
      btnQuery(){
        console.log(this.formInline);
        this.LoadData()
      },
      LocalUserInfoData(){ 
        this.$http.get("http://localhost:8080/work/list3").then((res)=>{
        this.UserInfoData = res.data;
        console.log(res.data);
      }).catch((err)=>{
        console.log(err);
      })
      },
      LoadData(){              //重加载数据
        this.$http.get("http://localhost:8080/work/list3?workname="+this.formInline.workname+"&state="+this.formInline.state).then((res)=>{
        this.tableData = res.data;
        this.pageInfo.total = res.data.length;
        console.log(res.data);
      }).catch((err)=>{
        console.log(err);
      })
    },
     
      updateWork() {   //更新修改操作
            this.$http.post("http://localhost:8080/work/update",this.form).then((res)=>{
              console.log(res.data);
              if(res.data==1){
                console.log("修改成功");
                this.form={},    //清空表单
                this.updateDialogVisible=false //关闭
                this.LoadData()   //重新加载
                ElMessage({
                message: '修改成功',
                type: 'success',
                })
              }else{
                console.log("修改失败");
                this.form={},
                this.updateDialogVisible=false //关闭
                this.LoadData()
                ElMessage({
                message: '修改失败',
                type: 'warning',
            }).catch((err)=>{
              // console.log(err);
            })
              }
        })
      },
     
      updateDialog(workid) {   //修改操作，数据回显
        console.log(workid);
        this.$http.get("http://localhost:8080/work/get/"+workid).then((res)=>{
            console.log(res.data)
            this.form = res.data
            
      }).catch((err)=>{
            console.log(err);
      })
      this.updateDialogVisible = true
  },

  deleteClick(workid) {    //删除操作
            console.log(workid);
            this.$http.get("http://localhost:8080/work/del/" + workid).then((res) => {
              console.log(res.data);
              if (res.data == 1) {
                console.log("删除成功");
                this.LoadData()
                ElMessage({
                  message: '删除成功',
                  type: 'success',
                })
              } else {
                console.log("删除失败");
                this.LoadData()
                ElMessage({
                  message: '删除失败',
                  type: 'warning',
                })
              }
            }).catch((err) => {
              // console.log(err);
            })
          },

         detailDialog(workid) {   //详情
        console.log(workid);
        this.$http.get("http://localhost:8080/work/get/"+workid).then((res)=>{
            console.log(res.data)
            this.form = res.data

            
      }).catch((err)=>{
            console.log(err);
      })
      this.detailDialogVisible = true
  },

      
     
    }
    
}
 </script>

 <style>
 .input-width {
    width: 40%; /* 设置宽度为100% */
    resize: none; /* 禁止调整大小 */
}
 .box{
  position: relative;
  top: 20px;
 }
 .custom-button {
  border: none; /* 去掉边框 */
  padding: 0;   /* 去掉内边距 */
  margin-left:12px; /* 左移10像素，根据需要调整 */
  background-color: transparent; /* 使背景透明，以便不显示默认按钮背景颜色 */
  cursor: pointer; /* 显示指针样式，表明是可点击的 */
}
.table-page{
  float:right;
  margin:12px
}
 </style>






















